import { Button, Table, type TableColumnsType } from 'antd';
import { useCallback, useEffect, useState } from 'react';
import type * as React from 'react';
import AddCardModal from './AddCardModal';
import AdminCardModal from './AdminCardModal';

interface DataType {
  key: React.Key;
  cardID: string;
  customerID: number;
  savingID: number;
  curID: string;
  openDate: string;
  openMoney: number;
  balance: number;
  IsReportLoss: boolean;
  pass: string;
}

const columns: TableColumnsType<DataType> = [
  { title: '卡号', dataIndex: 'cardID', width: '20%' },
  { title: '客户ID', dataIndex: 'customerID' },
  {
    title: '存款类型',
    dataIndex: 'savingID',
    render: (savingID: number) => {
      const savingTypes: Record<number, string> = {
        1: '活期',
        2: '定期一年',
        3: '定期二年',
        4: '定期三年',
        5: '定活两便',
        6: '零存整取一年',
        7: '零存整取二年',
        8: '零存整取三年',
      };
      return savingTypes[savingID] || '未知';
    },
    filters: [
      { text: '活期', value: 1 },
      { text: '定期一年', value: 2 },
      { text: '定期二年', value: 3 },
      { text: '定期三年', value: 4 },
      { text: '定活两便', value: 5 },
      { text: '零存整取一年', value: 6 },
      { text: '零存整取二年', value: 7 },
      { text: '零存整取三年', value: 8 },
    ],
    onFilter: (value, record) => record.savingID === value,
  },
  {
    title: '货币',
    dataIndex: 'curID',
    filters: [
      { text: 'RMB', value: 'RMB' },
      { text: 'USD', value: 'USD' },
    ],
    filterMode: 'tree',
    onFilter: (value, record) => record.curID.startsWith(value as string),
  },
  {
    title: '开卡日期',
    dataIndex: 'openDate',
    sorter: (a, b) =>
      new Date(a.openDate).getTime() - new Date(b.openDate).getTime(),
  },
  {
    title: '余额',
    dataIndex: 'balance',
    sorter: (a, b) => a.balance - b.balance,
  },
  {
    title: '是否挂失',
    dataIndex: 'IsReportLoss',
    render: (isReportLoss: boolean) => (isReportLoss ? '是' : '否'),
    filters: [
      { text: '是', value: true },
      { text: '否', value: false },
    ],
    onFilter: (value, record) => record.IsReportLoss === value,
  },
];

function AdminCard() {
  const [isModalVisible, setIsModalVisible] = useState(false);
  const [isAddModalVisible, setIsAddModalVisible] = useState(false);
  const [selectedCard, setSelectedCard] = useState<DataType | null>(null);
  const [cards, setCards] = useState<DataType[]>([]);

  const fetchCards = useCallback(() => {
    fetch('http://localhost:8000/cards/')
      .then((response) => response.json())
      .then((data) => {
        const formattedData = data.map((card: any) => ({
          key: card.cardID,
          cardID: card.cardID,
          customerID: card.customerID,
          savingID: card.savingID,
          curID: card.curID,
          openDate: card.openDate,
          openMoney: card.openMoney,
          balance: card.balance,
          IsReportLoss: card.IsReportLoss === 1,
          pass: card.pass,
        }));
        setCards(formattedData);
      });
  }, []);

  useEffect(() => {
    fetchCards();
  }, [fetchCards]);

  const handleRowClick = (record: DataType) => {
    setSelectedCard(record);
    setIsModalVisible(true);
  };

  const handleCancel = () => {
    setIsModalVisible(false);
    setSelectedCard(null);
  };

  const handleOperationSuccess = () => {
    fetchCards();
    setIsModalVisible(false);
    setIsAddModalVisible(false);
  };

  return (
    <>
      <Button
        type="primary"
        style={{ marginBottom: 16 }}
        onClick={() => setIsAddModalVisible(true)}
      >
        新增银行卡
      </Button>
      <Table<DataType>
        columns={columns}
        dataSource={cards}
        onRow={(record) => ({
          onClick: () => handleRowClick(record),
        })}
      />
      {selectedCard && (
        <AdminCardModal
          visible={isModalVisible}
          onCancel={handleCancel}
          card={selectedCard}
          onSuccess={handleOperationSuccess}
        />
      )}
      <AddCardModal
        visible={isAddModalVisible}
        onCancel={() => setIsAddModalVisible(false)}
        onSuccess={handleOperationSuccess}
      />
    </>
  );
}

export default AdminCard;
